<template>
  <el-dialog
      v-model="showDialog"
      :title="title"
      :draggable="true"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      @close="handleCloseDialog(tagInfoRef)"
      @closed="handleClosedDialog"
      @open="handleOpenDialog"
      @opened="handleOpenedDialog"
  >
    <el-form
        :model="tagInfo"
        :rules="tagInfoRules"
        ref="tagInfoRef"
        label-suffix=":"
        label-width="100px"
        status-icon
    >
      <el-form-item label="标识键" prop="tagKey">
        <el-input v-model="tagInfo.tagKey" type="text"></el-input>
      </el-form-item>
      <el-form-item label="标识名称" prop="tagName">
        <el-input v-model="tagInfo.tagName" type="text"></el-input>
      </el-form-item>
      <el-form-item label="所属模块" prop="moduleId">
        <common-dict-select v-model="tagInfo.moduleId" :dict-key="SYSTEM_MODULE"></common-dict-select>
      </el-form-item>
      <el-form-item label="说明" prop="introduce">
        <el-input v-model="tagInfo.introduce"></el-input>
      </el-form-item>

    </el-form>

    <template #footer>
      <el-button type="primary" @click="confirm(tagInfoRef)" :loading="confirmLoading">保存</el-button>
      <el-button type="danger" @click="closeDialog(tagInfoRef)">取消</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {DIALOG_EDIT, DIALOG_VIEW} from "@/constants/common-constant.ts";
import {reactive, ref, watch} from "vue";
import type {FormInstance, FormRules} from "element-plus";
import {SYSTEM_MODULE} from "@/constants/dict-constants.ts";
import {getParentMenuDropDownReq, saveMenuReq} from "@/api/admin/menu.ts";
import {elMessageTip, warningMessageTip} from "@/utils/tip-utils.ts";
import {RESPONSE_CODE_SUCCESS} from "@/config/common-config.ts";
import CommonDictSelect from "@/components/common/CommonDictSelect.vue";
import {getOneParamTagItemReq, saveTagItemReq} from "@/api/admin/param.ts";

const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  dialogType: {
    type: String,
    default: DIALOG_VIEW
  },
  dialogParam: {
    type: Object,
    default: () => {
    }
  }
})

const emits = defineEmits(['handleCloseDialog', 'handleClosedDialog', 'handleOpenDialog', 'handleOpenedDialog'])

const showDialog = ref(props.showDialog)
watch(() => props.showDialog, (val: boolean) => {
  showDialog.value = val
})

interface TagInfo {
  id: string;
  tagKey: string;
  tagName: string;
  moduleId: string;
  introduce: string;
}

const tagInfo = reactive<TagInfo>({
  id: '',
  tagKey: '',
  tagName: '',
  moduleId: '',
  introduce: ''
})

const tagInfoRef = ref<FormInstance>();

const tagInfoRules = reactive<FormRules<TagInfo>>({
  tagKey: [
    {required: true, message: '请输入标识键', trigger: 'blur'},
  ],
  tagName: [
    {required: true, message: '请输入标识名称', trigger: 'blur'}
  ],
  moduleId: [
    {required: true, message: '请选择所属类型', trigger: 'change'}
  ]
})

const initData = async () => {
  const params = {
    id: props.dialogParam.id
  }
  const res: any = await getOneParamTagItemReq(params)
  if (res.code === RESPONSE_CODE_SUCCESS) {
    const data = res.data;
    tagInfo.id = data.id
    tagInfo.tagKey = data.tagKey
    tagInfo.tagName = data.tagName
    tagInfo.moduleId = data.moduleId
    tagInfo.introduce = data.introduce
  } else {
    elMessageTip(res.tipType, res.message)
  }
}

const handleCloseDialog = (formEl: FormInstance | undefined) => {
  reset(formEl)
  emits('handleCloseDialog', false)
}

const handleClosedDialog = () => {
  emits('handleClosedDialog', false)
}

const handleOpenDialog = () => {
  emits('handleOpenDialog')
}

const handleOpenedDialog = () => {
  emits('handleOpenedDialog')
  if(props.dialogType == DIALOG_EDIT) {
    initData()
  }
}

const confirmLoading = ref<boolean>(false)
const confirm = async (formEl: FormInstance | undefined) => {
  if(!formEl) return
  await formEl.validate((valid, fields) => {
    if (!valid){
      warningMessageTip("请填写完整信息")
      return;
    } else {
      commonConfirm(formEl)
    }
  })
}

const commonConfirm = async (formEl: FormInstance | undefined) => {
  confirmLoading.value = true

  const params = {
    id: props.dialogParam.id,
    tagKey: tagInfo.tagKey,
    tagName: tagInfo.tagName,
    moduleId: tagInfo.moduleId,
    introduce: tagInfo.introduce
  }
  const res:any = await saveTagItemReq(params)
  elMessageTip(res.tipType, res.message)
  confirmLoading.value = false
  if (res.code === RESPONSE_CODE_SUCCESS) {
    closeDialog(formEl)
  }

}

const closeDialog = (formEl: FormInstance | undefined) => {
  reset(formEl)
  emits('handleCloseDialog', false)
}

const reset = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}


</script>

<style scoped>

</style>